@if (fieldGroup.separator) {
    <div class="nested-field">
        <span class="nested-field-line-h"></span>
        <sqx-field [field]="$any(fieldGroup.separator)" [languages]="languages" [parent]="parent" plain="true" [schema]="schema" [settings]="settings">
            <div class="d-flex align-items-center">
                <ng-content></ng-content>
                <button class="btn btn-sm btn-text-secondary ms-2" (click)="toggle()" type="button">
                    <i [class.icon-caret-down]="!snapshot.isCollapsed" [class.icon-caret-right]="snapshot.isCollapsed"></i>
                </button>
            </div>
        </sqx-field>
    </div>
}

@if (!snapshot.isCollapsed) {
    <div
        class="field-group nested-field"
        cdkDropList
        [cdkDropListData]="fieldGroup.fields"
        [cdkDropListDisabled]="!sortable"
        (cdkDropListDropped)="sorted.emit($event)"
        [class.field-placeholder]="fieldGroup.fields.length === 0 && !fieldsEmpty">
        @for (field of fieldGroup.fields; track trackByFieldFn($index, field)) {
            <div class="nested-field table-drag" cdkDrag cdkDragLockAxis="y">
                <span class="nested-field-line-h"></span>
                <sqx-field [field]="$any(field)" [languages]="languages" [parent]="parent" [schema]="schema" [settings]="settings">
                    <i class="icon-drag2 drag-handle" cdkDragHandle></i>
                </sqx-field>
            </div>
        }
    </div>
}
